<template>
  <div class="bg-img">
    <el-container class="text-container">
      <el-header class="data-title">花友大数据监测系统</el-header>
      <el-main class="list-container">
        <div class="list-left" id="data-left"></div>
        <div class="list-center" id="data-center"></div>
        <div class="list-right">
          <div class="list-right-top" id="data-right-top"></div>
          <div class="list-right-bottom" id="data-right-bottom"></div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      optionCenter: {
        title: { text: '测试标题' },
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {},
        legend: {
          data: ['2022', '2023']
        },
        series: [
          {
            name: '2022',
            type: 'bar',
            data: [1000, 200, 500, 1200, 4000, 4510, 1234, 5230],
            itemStyle: {
              barBorderRadius: 4
            }
          },
          {
            name: '2023',
            type: 'bar',
            data: [1230, 200, 500, 1200, 4000, 200, 532, 1859],
            itemStyle: {
              barBorderRadius: 4
            }
          }
        ]
      },
      optionRightTop: {
        title: { text: '饼图测试' },
        series: [
          {
            type: 'pie',
            data: [
              {
                value: 34,
                name: '种类1'
              },
              {
                value: 511,
                name: '种类2'
              },
              {
                value: 334,
                name: '种类3'
              }
            ],
            radius: '50%'
          }
        ]
      },
      optionRightBottom: {
        title: { text: '饼图测试1' },
        series: [
          {
            type: 'pie',
            data: [
              {
                value: 334,
                name: '种类1'
              },
              {
                value: 511,
                name: '种类2'
              },
              {
                value: 634,
                name: '种类3'
              }
            ],
            radius: '50%'
          }
        ]
      }
    }
  },
  methods: {
    listData() {
      let mychartsCenter = this.$echarts.init(document.getElementById('data-center'))
      mychartsCenter.setOption(this.optionCenter)
      // mycharts.on('click', function (params) {
      //   console.log(params, encodeURIComponent(params.name))
      // })
      let mychartsRightTop = this.$echarts.init(document.getElementById('data-right-top'))
      mychartsRightTop.setOption(this.optionRightTop)

      let mychartsRightBottom = this.$echarts.init(document.getElementById('data-right-bottom'))
      mychartsRightBottom.setOption(this.optionRightBottom)
    }
  },
  mounted() {
    this.listData()
  },

}
</script>

<style lang="scss" scoped>
.bg-img {
  width: 100%;
  height: calc(100vh - 60px);
  background-image: url('@/assets/bg1.jpg');
  background-repeat: no-repeat;
  background-size: cover;

  .text-container {
    height: 100%;

    .data-title {
      line-height: 60px;
      text-align: center;
      font-size: xx-large;
      font-weight: bold;
      color: white;
    }

    .list-container {
      width: 100%;
      height: 100%;
      display: flex;

      .list-left {
        width: calc(100% / 3);
        height: 100%;
        margin-left: 5px;
        // background-color: red;
      }

      .list-center {
        width: calc(100% / 3);
        height: calc(100% / 2);
        margin: 0 5px;
        // background-color: green;
      }

      .list-right {
        width: calc(100% / 3);
        height: calc(100% / 2);
        margin-right: 5px;
        // background-color: blue;

        .list-right-top {
          width: 100%;
          height: calc(100% / 2);
        }

        .list-right-bottom {
          width: 100%;
          height: calc(100% / 2);
        }
      }
    }
  }
}
</style>